<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body background="/myWeb/EVO3.jpg">
    <script type="text/javascript">
        function format(username){
            if(!username){
                return "用户名不能为空";
            }else if(username.length < 6 | username.length > 15){
                return "用户名必须6-14位";
            }else if(!/^[A-Za-z0-9]+$/.test(username)){
                document.getElementById("username").onfocus = function(){
                    document.getElementById("username").value = "";
                }
                return "用户名只能有数字和字母组成，不能含其他符号";
            }
            return "";
        }

        function register(username){
            if(format(username.value) === ""){
                document.getElementById("userForm").submit();
                return;
            }
            username.focus();
            username.blur();
        }


        window.onload = function (){
            var userNameSpan = document.getElementById("userNameSpan");
            var username = document.getElementById("userName");
            var btn = document.getElementById("btn");
            var password = document.getElementById("password");

            username.onblur = function(){
                var userName = username.value.trim();
                var nameStr = format(userName);
                userNameSpan.innerText = nameStr;
                if(nameStr != ""){
                    username.onfocus = function(){
                        userNameSpan.innerText = "";
                    }
                }
            }



            password.onkeydown = function(event){
                if(event.keyCode === 13){
                    register(username);
                }
            };
            btn.onclick = function(){
                register(username);
            }
        }
    </script>



    <form action="/myWeb/login" method="post" id="userForm" >
        <table align="center">
            <tr>
                <td>账号</td>
                <td><input type="text" name="userName" id="userName" /></td>
                <td><span style="color: #FF0000;font-size: 12px" id="userNameSpan"></span></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="password" /></td>
            </tr>
            <tr>
                <td><input type="button" value="登录" id="btn" /></td>
            </tr>
        </table>

    </form>
</body>
</html>